
	function fun(selector){
		var result = document.querySelectorAll(selector);
		if(result.length === 1){
			return result[0]
		}
		return result;
	}
	
	fun("#smallWrap img").forEach(item => {	
		item.onmousemove = function() {
			fun("#big").src = this.src;
			fun(".show img").src = this.src;
			item.className="red";
		}
		item.onmouseleave = function() {
			item.className="";
		}
	})

	
	
	fun("#bigWrap").onmousemove = function(event) {
		// 阴影元素正矩形的边长
		let moveSize = fun(".move").offsetWidth;
		// 大图盒子的尺寸
		let selfWidth = this.offsetWidth;
		let selfHeight = this.offsetHeight;
		// console.log(selfHeight);
		//  阴影元素的边距
		let lt = parseInt(fun(".move").style.left);
		let tp = parseInt(fun(".move").style.top);

		// 边界约束
		if (event.offsetY <= moveSize / 2) {
			fun(".move").style.top = 0;
		} else {
			fun(".move").style.top = event.offsetY - moveSize / 2 + "px";
		}
		if (event.offsetX <= moveSize / 2) {
			fun(".move").style.left = 0;
		} else {
			fun(".move").style.left = event.offsetX - moveSize / 2 + "px";
		}
		if (event.offsetX >= selfWidth - moveSize / 2) {
			fun(".move").style.left = selfWidth - moveSize + "px";
		}
		if (event.offsetY >= selfHeight - moveSize / 2) {
			fun(".move").style.top = selfHeight - moveSize + "px";
		}

		// 定位大图片
		fun(".show img").style.left = -(lt * 3) + "px";
		fun(".show img").style.top = -(tp * 3) + "px";

	}

	fun("#bigWrap").onmouseenter = function() {
		fun(".move").style.display = "block";
		fun(".show").style.display = "block";
	}
	fun("#bigWrap").onmouseleave = function() {
		fun(".move").style.display = "none";
		fun(".show").style.display = "none";
	}